<template>
  <div class="user-page">
    <h1>用户中心</h1>
    <p>欢迎来到用户中心，您可以查看和管理个人信息</p>

    <el-row :gutter="20">
      <el-col :span="8">
        <el-card>
          <template #header>
            <span>个人信息</span>
          </template>
          <div>
            <el-button type="primary" @click="handleProfile">个人资料</el-button>
            <el-button type="success" @click="handleResume">我的简历</el-button>
            <el-button type="warning" @click="handleApplications">我的申请</el-button>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card>
          <template #header>
            <span>求职服务</span>
          </template>
          <div>
            <el-button type="primary" @click="handleJobSearch">职位搜索</el-button>
            <el-button type="success" @click="handleFavorites">收藏职位</el-button>
            <el-button type="warning" @click="handleRecommendations">推荐职位</el-button>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card>
          <template #header>
            <span>消息通知</span>
          </template>
          <div>
            <el-button type="primary" @click="handleMessages">消息中心</el-button>
            <el-button type="success" @click="handleNotifications">通知设置</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>最近活动</span>
          </template>
          <div>
            <el-button type="primary" @click="handleRecentActivity">查看活动</el-button>
            <el-button type="success" @click="handleHistory">历史记录</el-button>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card>
          <template #header>
            <span>账户设置</span>
          </template>
          <div>
            <el-button type="primary" @click="handleAccountSettings">账户设置</el-button>
            <el-button type="success" @click="handlePrivacySettings">隐私设置</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { showCustomMessage } from '../../utils/message'

// 个人信息功能
const handleProfile = () => {
  showCustomMessage('个人资料功能', 'info')
}

const handleResume = () => {
  showCustomMessage('我的简历功能', 'info')
}

const handleApplications = () => {
  showCustomMessage('我的申请功能', 'info')
}

// 求职服务功能
const handleJobSearch = () => {
  showCustomMessage('职位搜索功能', 'info')
}

const handleFavorites = () => {
  showCustomMessage('收藏职位功能', 'info')
}

const handleRecommendations = () => {
  showCustomMessage('推荐职位功能', 'info')
}

// 消息通知功能
const handleMessages = () => {
  showCustomMessage('消息中心功能', 'info')
}

const handleNotifications = () => {
  showCustomMessage('通知设置功能', 'info')
}

// 最近活动功能
const handleRecentActivity = () => {
  showCustomMessage('查看活动功能', 'info')
}

const handleHistory = () => {
  showCustomMessage('历史记录功能', 'info')
}

// 账户设置功能
const handleAccountSettings = () => {
  showCustomMessage('账户设置功能', 'info')
}

const handlePrivacySettings = () => {
  showCustomMessage('隐私设置功能', 'info')
}
</script>

<style scoped>
.user-page {
  padding: 20px;
}

.user-page h1 {
  color: #409eff;
  margin-bottom: 10px;
  font-size: 28px;
}

.user-page p {
  color: #666;
  margin-bottom: 30px;
  font-size: 16px;
}

.el-card {
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-card :deep(.el-card__header) {
  background-color: #f5f7fa;
  font-weight: bold;
  color: #303133;
}

.el-button {
  margin-right: 10px;
  margin-bottom: 10px;
  min-width: 100px;
}

.el-row {
  margin-bottom: 20px;
}
</style>
